<template>
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="breadcrumb-list">
                        <nav aria-label="breadcrumb" class="page-breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <router-link to="/teacher">首页</router-link>
                                </li>
                                
                                <li class="breadcrumb-item" aria-current="page">
                                    <router-link to="/teacher/course">我的课程</router-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">Scratch编程启蒙</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="inner-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="instructor-wrap border-bottom-0">
                        <div class="about-instructor align-items-center">
                            <div class="abt-instructor-img">
                                <a href="instructor-profile.html">
                                    <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                                </a>
                            </div>
                            <div class="instructor-detail me-3">
                                <h5><a href="instructor-profile.html">Scratch趣味编程</a></h5>
                                <p>初级</p>
                            </div>
                        </div>
                    </div>
                    <h2>Scratch趣味编程之S1-编程启蒙</h2>
                    <p>结合游戏关卡和Scratch作品创作，从零开始逐步培养孩子的编程思维，使用Scratch创作简单的小游戏。</p>
                    <div class="course-info d-flex align-items-center border-bottom-0 m-0 p-0">
                        <div class="cou-info">
                            <p><i class="feather-book"></i>课时数：12</p>
                        </div>
                        <div class="cou-info">
                            <p><i class="feather-grid"></i>知识点：28个</p>
                        </div>
                        <div class="cou-info">
                            <p><i class="feather-clock"></i>时长：3小时33分钟</p>
                        </div>
                        <div class="cou-info">
                            <p><i class="feather-slack"></i>代码量：300行</p>
                        </div>
                        <div class="cou-info">
                            <p style="width: 78px;"><i class="feather-alert-octagon"></i>难度:</p>
                            <div class="rating mb-0">
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star filled"></i>
                                <i class="fas fa-star"></i>
                                <span class="d-inline-block average-rating"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="page-content course-sec">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-0 px-0">
                    <div v-for="i in 5" :key="i" class="d-flex">
                        <div class="course-box course-design list-course d-flex">
                            <div class="product">
                                <div class="product-img">
                                    <a href="course-details.html">
                                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                                    </a>
                                    <div class="no">
                                        <h3>{{ i }}</h3>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <div class="head-course-title">
                                        <h3 class="title"><a href="course-details.html">顺序之迷宫游戏</a></h3>
                                        
                                    </div>
                                    <p>通过迷宫闯关游戏，了解什么是顺序编程以及顺序编程的特点。</p>
                                    <p>涉及学科：<span class="tag">数学</span> 物理</p>
                                    <p>课程亮点：xxxx</p>
                                    
                                    <div class="course-group d-flex mb-0">
                                        <div class="course-share d-flex align-items-center justify-content-center">
                                            <router-link to="./lesson-detail?id=1" class="btn btn-primary">
                                                查看详情
                                            </router-link>
                                            <!-- <a href="checkout.html" class="btn btn-primary">继续学习</a> -->
                                            <!-- <a href="checkout.html" class="btn btn-primary">暂未开放</a> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar-sec">
                        <div class="video-sec vid-bg">
                            <div class="card">
                                <div class="card-body">
                                    <a href="https://www.youtube.com/embed/1trvO6dqQUI" class="video-thumbnail"
                                        data-fancybox="">
                                        <div class="play-icon">
                                            <i class="fa-solid fa-play"></i>
                                        </div>
                                        <img class="" src="assets/img/video.jpg" alt="">
                                    </a>
                                    <div class="video-details">
                                        <div class="course-fee">
                                            <h2>FREE</h2>
                                            <p><span>$99.00</span> 50% off</p>
                                        </div>
                                        <div class="row gx-2">
                                            <div class="col-md-6">
                                                <a href="course-wishlist.html" class="btn btn-wish w-100"><i
                                                        class="feather-heart"></i> Add to Wishlist</a>
                                            </div>
                                            <div class="col-md-6">
                                                <a href="javascript:;" class="btn btn-wish w-100"><i
                                                        class="feather-share-2"></i> Share</a>
                                            </div>
                                        </div>
                                        <a href="checkout.html" class="btn btn-enroll w-100">Enroll Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">课程目标</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li v-for="i in 5" :key="i"><a href="javascript:void(0);"><i
                                                class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                </ul>
                            </div>
                        </div>


                        <div class="card tags-widget blog-widget tags-card">
                            <div class="card-header">
                                <h4 class="card-title" data-sider-select-id="936928d0-6fdf-43b8-b710-e301a6cdbfe3">知识点
                                </h4>
                            </div>
                            <div class="card-body">
                                <ul class="tags">
                                    <li><a href="javascript:void(0);" class="tag">HTML</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java Script</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Css</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Jquery</a></li>
                                    <li><a href="javascript:void(0);" class="tag">Java</a></li>
                                    <li><a href="javascript:void(0);" class="tag">React</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="card category-widget blog-widget">
                            <div class="card-header">
                                <h4 class="card-title">学习要求</h4>
                            </div>
                            <div class="card-body">
                                <ul class="categories">
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Business </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Courses </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Education </a>
                                    </li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Graphics Design
                                        </a></li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Programming
                                        </a></li>
                                    <li><a href="javascript:void(0);"><i class="fas fa-angle-right"></i> Web Design </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

</template>
<style>
.course-design .no {
    min-width: auto;
    padding: 8px 15px;
    text-align: center;
}
.no {
    min-width: 140px;
    padding: 6px 15px;
}
.no {
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 149px;
    padding: 14px 15px;
    border-radius: 10px;
}
.no h3 {
    font-size: 20px;
}

.no h3 {
    font-size: 24px;
    color: #F66962;
    font-weight: 700;
    margin-bottom: 0;
}
</style>
<script setup>
// course, student, process, setting
const tabs = ref([
    {
        id: "course",
        name: '课程'
    },
    {
        id: "student",
        name: '学生'
    },
    {
        id: "process",
        name: '进度'
    },
    {
        id: "setting",
        name: '设置'
    }])
const curTab = ref('student')
</script>
